<div id="form1">
<form class="layui-form" action="" id="user_search">
    <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="tel" name="real_name" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-inline">
            <input type="text" name="email" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">用户权限</label>
        <div class="layui-input-inline">
            <select name="statuss"  lay-search="">
                <option value="">请选择</option>
                <option value="0">0</option>
                <option value="1">1</option>
            </select>
        </div>
    </div>
        <div class="layui-inline">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="user_search_form">搜索</button>
        </div>
</form>
</div>

<table id="user-table" lay-filter="user-table" ></table>

<script>
    layui.use(function(){
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        // var laydate = layui.laydate;

        //第一个实例
        table.render({
            elem: '#user-table'
            ,height: 312
            ,url: '/user/getAll' //数据接口
            ,page: {
                layout: ['prev', 'page', 'next', 'skip','limit', 'count']
                ,limit:2
                ,limits:[2,4,6,8,10]
                //,curr: 5 //设定初始在第 5 页
            }
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID',sort: true}//sort: true 页面可以对列进行排序
                ,{field: 'real_name', title: '用户名'}
                // ,{field: 'password', title: '', width:80, sort: true}
                ,{field: 'email', title: '邮箱'}
                ,{field: 'status', title: '状态'}
                ,{field: 'filename', title: '头像路径', sort: true}
                ,{field:'operate', title: '操作',toolbar: '#user-edit-bar',width:180}//操作那一列
            ]]
            ,toolbar:'#toolbarDemo'//加载id为toolbarDemo这个事件
        });

        //头工具栏事件
        table.on('toolbar(user-table)',function (obb) {
            switch (obb.event) {
                case 'addUser':
                    openEditWindow(null);
                    break;
                case 'showAll':
                    $.ajax({
                        url: '/user/showAll',
                        method: 'get',
                        success: function (result) {
                            layer.msg("adadads")
                            layer.msg(result.filename)
                            window.location.href = "/user/download?filename="+result.filename;


  /*                          layer.msg(result)
                            table.exportFile("全部文件",result,"txt")*/
 /*                           table.reload('user-table', {});
                            layer.close(index);*/
                        }
                    })
                    break;
                case 'deleteUser':
                    var data = table.checkStatus('user-table').data;
                    if (data.length > 0) {
                        layer.confirm('真的删除行么', function (index) {
                            var param = ""
                            $.each(data, function (i, obj) {
                                param += "&ids=" + obj.id
                            })
                            $.ajax({
                                url: '/user/del',
                                data: param,
                                method: 'post',
                                success: function (result) {
                                    if (result.status) {
                                        table.reload('user-table', {});
                                    } else {
                                        alert(result.message)
                                    }
                                    layer.close(index);
                                }
                            })
                        });
                    }
                    break;
            }
        })

        //封装好的弹出窗口
        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: data == null ? $('#user-add-layer').html():$('#user-edit-layer').html(),
                title: '编辑'
                , area: ['500px', '400px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load();//固定写法
                    console.log($("#user-add-form").serialize());
                    if(data==null){
                        var from = new FormData(document.getElementById("user-add-form"));
                    }
                    if (data!=null){
                        var from1 = new FormData(document.getElementById("user-edit-form"));
                    }
                    $.ajax({
                        url: "/user/" + (data == null ? 'add' : 'update'),//返回到哪个接口
                        //  url: '/sys/customer/update',           $("#user-add-form").serialize()   $("#user-edit-form").serialize()
                        data: data == null ?from:from1,
                        method: 'post',
                        processData:false,
                        contentType:false,
                        success: function (result) {
                            if (result.status) {
                                table.reload('user-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    });
                }, success: function (layero, index) {
                    // form.render();//渲染单选框等特殊元素
                    // //日期
                    // laydate.render({
                    //     elem: '#birthday'
                    // });
                    // laydate.render({
                    //     elem: '#registTime'
                    // });
                    // laydate.render({
                    //     elem: '#birthday1'
                    // });
                    // laydate.render({
                    //     elem: '#registTime1'//对日期组件的处理
                    // });
                    // 为编辑模式填充数据
                    if (data != null) {
                        form.val("user-edit-form", data);
                    }
                }
            });
        }

        //监听行工具事件
        table.on('tool(user-table)', function (obj) {
            var data = obj.data;//取当前行数据
            switch (obj.event) {
                case 'edit-user': {
                    openEditWindow(data);
                    break;
                }

            }
        });

        //对搜索表单注册表单提交事件
        form.on('submit(user_search_form)',function (data) {//user_search_form 提交按钮的id
            console.log(data.field)
            table.reload('user-table',{//数据表格的id
                page:{
                    curr:1//从第一页开始展示
                },
                where:data.field//回传的数据
            });
            return false;
        })

        //全部导出事件
        $("#showAll").on(function () {
            debugger
            $.ajax({
                url: '/user/showAll',
                method: 'get',
                success: function (result) {
                    debugger
                    // layer.msg(result)
                    if (result.status) {
                        table.reload('user-table', {});
                    } else {
                        alert(result.message)
                    }
                    layer.close(index);
                }
            })
        })

        form.render();//当表单中有单选框 或下拉框 等复杂的就这个 让layui的所有组件全部强制刷新
    });
</script>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser"><i class="layui-icon">&#xe654;</i>增加</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="deleteUser"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="showAll" id="showAll"><i class="layui-icon">&#xe609;</i>全部导出</button>
    </div>
</script>


<!-- 增加-->
<script type="text/html" id="user-add-layer">
    <form id="user-add-form" style="width: 80%" class="layui-form" lay-filter="user-add-form"
          method="post" enctype="multipart/form-data">
<!--        <input type="hidden" name="id">-->
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="real_name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="img">
            <p>请上传您的头像</p>
            <input type="file" id="source" name="source"  required>
        </div>

    </form>
</script>

<!-- 修改-->
<script type="text/html" id="user-edit-layer">
    <form id="user-edit-form" style="width: 80%" class="layui-form" lay-filter="user-edit-form"
          method="post" enctype="multipart/form-data">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="real_name" required lay-verify="required" placeholder="请输入用户名"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="text" name="email" required lay-verify="required" placeholder="请输入邮箱"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="img">
            <p>请上传您的头像</p>
            <input type="file"  name="source"  required>
        </div>

    </form>
</script>

<style>
    .img{
        margin-left: 60px;
        margin-bottom: 10px;
    }
    #form1{
        margin-top: 10px;
    }
</style>

<!--增加的那一列 修改 的实现-->
<script type="text/html" id="user-edit-bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit-user">编辑</a>
</script>